<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="680px" :title="dialogProps.title">
    <div class="use-dialog-body">
      <ProTable
        ref="proTable"
        row-key="id"
        :tool-button="false"
        :margin-border="false"
        :indent="20"
        :columns="dialogProps.columns"
        :request-api="dialogProps.api"
        :data-callback="dataCallback"
        :init-param="dialogProps.initParam"
        @selection-change="changeSelection"
      >
      </ProTable>
      <div class="selector-footer" v-if="dialogProps.selType === 'selection'">
        <div class="flx-justify-between pt10 pb10">
          <span>已选择({{ tags.length }})</span>
          <el-button type="danger" @click="clearSelection">清空</el-button>
        </div>
        <div class="inner">
          <el-tag v-for="tag in tags" :key="tag.id" class="mr6 mb6" closable @close="handleDelTag(tag.id)">
            {{ tag.name || tag[dialogProps.tagsName] }}
          </el-tag>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ElMessage } from "element-plus";
import { ProTableInstance } from "@/components/ProTable/interface";

const emit = defineEmits(["selectedList", "radio"]);
interface DialogProps {
  title: string;
  isView: boolean;
  selType?: string;
  index?: number;
  initParam?: any;
  columns?: any[];
  tagsName?: string;
  api?: (params: any) => Promise<any>;
  getTreeFilter?: () => void;
}

const dialogVisible = ref(false);
const tableData = ref([]);
const tags = ref([]);
const proTable = ref<ProTableInstance>();
const dialogProps = ref<DialogProps>({
  isView: false,
  title: "",
  selType: "selection",
  index: -1
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params;
  tags.value = dialogProps.value.selTags;
  dialogVisible.value = true;
};

const dataCallback = (data: any) => {
  tableData.value = data.list ?? [];
  if (dialogProps.value.selType === "selection") {
    nextTick(() => {
      const tags_Ids = tags.value.map(i => i.id);
      tableData.value.forEach(item => {
        if (tags_Ids.includes(item.id)) {
          proTable.value!.element.toggleRowSelection(item, true);
        }
      });
    });
  }
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// const getTableData = () => {
//   dialogProps.value
//     .api({ spageNum: 1, pageSize: 20 })
//     .then(res => {
//       tableData.value = res.data.list ?? [];
//       nextTick(() => {
//         const tags_Ids = tags.value.map(i => i.id);
//         tableData.value.forEach(item => {
//           if (tags_Ids.includes(item.id)) {
//             proTable.value!.element.toggleRowSelection(item, true);
//           }
//         });
//       });
//     })
//     .catch(() => {
//       tableData.value = [];
//     });
// };

const handleSubmit = () => {
  if (dialogProps.value.selType === "selection") {
    if (tags.value.length > 0) {
      emit("selectedList", { list: tags.value, title: dialogProps.value.title });
      dialogVisible.value = false;
    } else {
      ElMessage.error("请选择数据");
    }
  } else if (dialogProps.value.selType === "radio") {
    emit("radio", { data: proTable.value!.radio, index: dialogProps.value.index });
  }
  dialogVisible.value = false;
};

const handleDelTag = (tag?: string | number) => {
  let index1 = tags.value.findIndex(item => item.id === tag);
  let index2 = tableData.value.findIndex(item => item.id === tag);
  if (index1 > -1) {
    tags.value.splice(index1, 1);
  }
  if (index2 > -1) {
    proTable.value!.element.toggleRowSelection(tableData.value[index2], false);
  }
};

// 清空选择
const clearSelection = () => {
  if (tags.value.length !== 0) {
    tags.value.splice(0, tags.value.length);
    proTable.value!.element.clearSelection();
  }
};

const changeSelection = (selection: any[]) => {
  if (dialogProps.value.title === "门店选择") {
    tags.value = selection.map(i => {
      return { id: i.id, name: i.storeName };
    });
    console.log(888, tags.value);
  } else {
    selection.forEach(v => {
      if (!tags.value.some(e => e.id === v.id)) {
        tags.value.push(v);
      }
    });
  }
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  max-height: 500px;
  padding: 0 !important;
}
.use-dialog-body {
  height: 560px;
}
</style>
